/*
 * 封装一个可以切换点击状态的按钮
 * 设置div的class为ly-button 将会自动被添加 
 * */
var LYButton = function(supDiv) {
	var self = this;
	//	this.backImg = null;
	this.init = function(supDiv) {
		if(supDiv) {
			if(supDiv[0]) {
				supDiv = supDiv[0]
			}
			//拿取supDiv原来的文本内容
			this.textDiv = supDiv.innerHTML
			this.width = parseInt(supDiv.style.width);
			this.height = parseInt(supDiv.style.height);
			supDiv.innerHTML = '';
			this.commonImg = supDiv.getAttribute('data-common');
			this.designateImg = supDiv.getAttribute('data-deaign') || this.commonImg;
			const a = document.createElement('a');
			this.aElement = a;
			a.style.textAlign = 'center'
			a.style.position = 'absolute';
			a.style.width = supDiv.style.width;
			a.style.height = supDiv.style.height;
//			a.style.top = '0px';
//			a.style.left = '0px';
			supDiv.appendChild(a);
			//创建背景图片
			var img = document.createElement('img');
			this.backImg = img;
			a.appendChild(img);
			img.style.position = 'absolute';
			img.style.zIndex = '-1'
			img.style.width = a.style.width;
			img.style.height = a.style.height;
			img.style.top = '0px';
			img.style.left = '0px';
			img.setAttribute('src', this.commonImg);
			//添加文字
			const p = document.createElement('p');
			p.setAttribute('style', null);
			this.textP = p;
			p.style.display = 'inline-block';
			p.style.verticalAlign = 'middle';
			p.style.marginTop = (parseInt(a.style.height) - 16) * 0.5 + 'px';
			const span = document.createElement('span');
			span.innerHTML = this.textDiv;
			p.appendChild(span);
			a.appendChild(p);

			this.aElement.onclick = function(e) {
				if(self.clickBool) {
					self.backImg.setAttribute('src', self.commonImg);
					self.clickBool = false;
					self.clickEvent && self.clickEvent(0, e);
				} else {
					self.backImg.setAttribute('src', self.designateImg);
					self.clickBool = true;
					self.clickEvent && self.clickEvent(1, e);
				}
			}
		}
	}
	this.init(supDiv);
	this.clickBool = null;
	this.clickEvent = null
	//监听点击
	this.click = function(callback) {
		this.clickEvent = callback
	}
}

function LYButtonInit() {
	const lyButs = document.getElementsByClassName('ly-button')
	const l = lyButs.length;
	for(var i = 0; i < l; i++) {
		//创建button对象
		const but = new LYButton(lyButs[i]);
	}
}
LYButtonInit()

/*
 * 点击是按钮微微放大
 * 松开时触发点击效果
 * */
LYMagnifyBut = function(supDiv) {
	LYButton.call(this);
	this.init(supDiv);
	this.superD = function() {
		console.log('我被打印了')
	}
	//重写父类的
	var self = this;
	this.click = function(callback) {
		this.clickEvent = callback
		//监听
		var multiple = 0.1
		var backImg = $(self.backImg);
		this.aElement.onmousedown = function() {
			backImg.animate({
				width: self.width * 1.1 + 'px',
				height: self.height * 1.1 + 'px',
				left: -(self.width * multiple * 0.5) + 'px',
				top: -(self.width * multiple * 0.5) + 'px',
			}, 50)
		}
		this.aElement.onmouseup = function() {
			backImg.animate({
				width: self.width + 'px',
				height: self.height + 'px',
				left: '0px',
				top: '0px',
			}, 50)
		}
	}
}